<script setup>
import { onMounted, ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getpaylistapi } from "@/api";
import bottomCopyringht from "../../components/bottom-copyright.vue";
import { logicAnd } from "@vueuse/shared";

const onFinish = () => {
  console.log("Success:", values);
};

const onFinishFailed = () => {
  console.log("Failed:", errorInfo);
};

const visible = ref(false);
var that = this;
const data = [
  {
    paytype: "wechat",
    paytypename: "微信公众号支付",
    status: "未配置",
  },
  {
    paytype: "minwechat",
    paytypename: "微信小程序支付",
    status: "未配置",
  },
  {
    paytype: "alipay",
    paytypename: "支付宝",
    status: "未配置",
  },
  {
    paytype: "jianhangpay",
    paytypename: "建行支付",
    status: "已配置",
  },
];

const columns = [
{
    title: "支付名称",
    dataIndex: "paytypename",
    key: "paytypename",
  },
  {
    title: "支付方式",
    dataIndex: "paytype",
    key: "paytype",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
  },
  {
    title: "操作",
    dataIndex: "address",
    key: "action",
  },
];

// const getpaylist = () => {
//   getpaylistapi().then((res) => {
//     debugger
//     listdata.toplable = res.data;
//   });
// };
const showconfig = (data) => {
  visible.value = true;
  // getpaylistapi({ type: data.paytype }).then((res) => {
  //   visible.value = true;
  // });
};
</script>

<template>
  <div style="margin: 20px 0 0;min-height:83vh;width: 100%;">
  <a-card >
    <a-row style="margin: 10px 0px">
      <a-alert
        message="*不同应用场景支持的支付方式不同。"
        type="warning"
        show-icon
        style="width: 100%"
      />
    </a-row>
    <a-table :columns="columns" :data-source="data">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'status'">
          <span>
            <a-tag color="geekblue"> 未配置 </a-tag>
          </span>
        </template>
        <template v-else-if="column.key === 'action'">
          <span>
            <a @click="showconfig(record)">编辑</a>
            <a-divider type="vertical" />
          </span>
        </template>
      </template>
    </a-table>
  </a-card>
</div>
  <a-drawer
    :visible="visible"
    width="500px"
    @close="visible = false"
    title="配置"
    placement="right"
  >
    <a-row
      style="
        background-color: #fffbe6;
        border: 1px solid #ffe58f;
        padding: 10px;
      "
    >
      <p>微信支付的接口说明如下：</p>
      <br />
      <h4>JS API网页支付参数</h4>
      <p>
        支付授权目录: http://wxsm.wxsushangw2.com/payment/wechat/ 和
        http://wxsm.wxsushangw2.com/app/
      </p>
      <p>支付请求实例: http://wxsm.wxsushangw2.com/payment/wechat/pay.php</p>
    </a-row>

    <a-row style="margin: 10px">
      <a-form
        style="width: 90%"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        labelAlign="left"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item label="appId">
          <a-tooltip placement="topLeft" title="公众号身份标识 请通过修改公众号信息来保存">
            <a-input  :disabled="true" />
          </a-tooltip>
        </a-form-item>

        <a-form-item label="appSecret">
          <a-tooltip placement="topLeft" title="公众平台API(参考文档API 接口部分)的权限获取所需密钥Key 请通过修改公众号信息来保存">
            <a-input :disabled="true"  />
          </a-tooltip>
        </a-form-item>

        <a-form-item label="mchid">
          <a-tooltip placement="topLeft" title="商户号">
            <a-input />
          </a-tooltip>
        </a-form-item>
        <a-form-item label="key">
          <a-tooltip placement="topLeft" title="商户密钥">
            <a-input />
          </a-tooltip>
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary" html-type="submit">Submit</a-button>
        </a-form-item>
      </a-form>
    </a-row>
  </a-drawer>
</template>

<style lang="scss" scoped></style>
